//导入html-webpack-plugin
const HtmlWebpackPlugin = require('html-webpack-plugin')
path = require('path')

module.exports = {
  //development 开发环境
  //production 生成环境
  mode: 'production',
  //入口文件 多文件用对象
  //js文件的地址
  entry: {
    index: path.resolve(__dirname, './src/js/index.js')
  },
  //打包输出
  output: {
    //目录
    path: path.resolve(__dirname + '/dist'),
    filename: 'js/[name].js'
  },
  module: {
    //配置规则
    rules: [{
        //匹配文件的后缀名为结尾的所有文件
        test: /\.js$/,
        //匹配的加载器
        loader: 'babel-loader',
        //排除文件
        exclude: path.resolve(__dirname, 'node_modules')
      },
      {
        test: /\.css$/,
        //多个load用use: []
        use: [
          //从下到上 从右到左
          'style-loader',
          'css-loader'
        ]
      },
      {
        test: /\.scss$/,
        use: [
          'style-loader',
          'css-loader',
          'sass-loader'
        ]
      },
      {
        test: /\.tpl$/,
        loader: 'ejs-loader'
      }
    ]
  },
  //装的是实例化对象
  plugins: [
    new HtmlWebpackPlugin({
      //打包后文件名
      filename: 'index.html',
      //需要打包的文件名称
      template: path.resolve(__dirname, './src/index.html'),
      //新增入口文件
      chunks: ['index'],
      //排除文件
      excludeChunks: ['node_modules'],
      disableScript: true
    })
  ],
  //配置
  devServer: {
    //自动打开浏览器 
    open: true,
    //主机
    host: '127.0.0.1',
    //端口
    port: 3300
  },
  stats: {
    children: false
  }
}